<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="Maxence Charriere" name="author">
<meta name="description" content="Documentation about how to customize components with go-app declarative syntax.">
<meta name="keywords" content="go-app, go, golang, app, pwa, progressive web app, webassembly, web assembly, webapp, web, gui, ui, user interface, graphical user interface, frontend, opensource, open source, github">
<meta name="theme-color" content="#2e343a">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover" name="viewport">
<meta property="og:url" content="http://127.0.0.1:60452/declarative-syntax">
<meta property="og:title" content="Customize Components with go-app Declarative Syntax">
<meta property="og:description" content="Documentation about how to customize components with go-app declarative syntax.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://go-app.dev/web/images/go-app.png">
<title>Customize Components with go-app Declarative Syntax</title>
<link type="text/css" rel="preload" href="/app.css" as="style">
<link as="style" type="text/css" rel="preload" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap">
<link type="text/css" rel="preload" href="/web/css/prism.css" as="style">
<link type="text/css" rel="preload" href="/web/css/docs.css" as="style">
<link rel="icon" href="https://raw.githubusercontent.com/maxence-charriere/go-app/master/docs/web/icon.svg">
<link rel="apple-touch-icon" href="/web/icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="stylesheet" type="text/css" href="/app.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap">
<link rel="stylesheet" type="text/css" href="/web/css/prism.css">
<link rel="stylesheet" type="text/css" href="/web/css/docs.css">
<script defer src="/wasm_exec.js"></script>
<script defer src="/app.js"></script>
<script src="/web/js/prism.js" defer></script>
<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1013306768105236" crossorigin="anonymous" async></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=G-SW4FQEM9VM"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());
	
	  gtag('config', 'G-SW4FQEM9VM', {'send_page_view': false});
	</script>
</head>
<body>
<div class="fill background" data-goapp-ui="shell">
<div id="goapp-shell-81d0db69-d13f-44f9-a462-8bc40a56322a" style="display:flex;width:100%;height:100%;overflow:hidden;">
<div style="position:relative;display:none;flex-shrink:0;flex-basis:270px;overflow:hidden;"><div class="menu fill" data-goapp-ui="scroll"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
<div style="width:calc(100% - 24px);padding:0 12px;height:72px;"><div data-goapp="Stack" class="fill" style="display:flex;justify-content:flex-start;align-items:center;"><header><a class="heading app-title" href="/">Go-App</a></header></div></div>
<div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><nav>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
	</svg></div>
<div>Home</div>
</div></a>
<a title href="/getting-started" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z" />
	</svg></div>
<div>Getting Started</div>
</div></a>
<a class="link heading fit unselectable" title href="/architecture"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z" />
	</svg></div>
<div>Architecture</div>
</div></a>
<a class="link heading fit unselectable" title href="/reference"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg width="24px" height="24px" viewBox="0 0 207 78" xmlns="http://www.w3.org/2000/svg">
		<g fill="currentColor" fill-rule="evenodd">
			<path d="m16.2 24.1c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h35.7c.4 0 .5.3.3.6l-1.7 2.6c-.2.3-.7.6-1 .6z"/>
			<path d="m1.1 33.3c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h45.6c.4 0 .6.3.5.6l-.8 2.4c-.1.4-.5.6-.9.6z"/>
			<path d="m25.3 42.5c-.4 0-.5-.3-.3-.6l1.4-2.5c.2-.3.6-.6 1-.6h20c.4 0 .6.3.6.7l-.2 2.4c0 .4-.4.7-.7.7z"/>
			<g transform="translate(55)">
				<path d="m74.1 22.3c-6.3 1.6-10.6 2.8-16.8 4.4-1.5.4-1.6.5-2.9-1-1.5-1.7-2.6-2.8-4.7-3.8-6.3-3.1-12.4-2.2-18.1 1.5-6.8 4.4-10.3 10.9-10.2 19 .1 8 5.6 14.6 13.5 15.7 6.8.9 12.5-1.5 17-6.6.9-1.1 1.7-2.3 2.7-3.7-3.6 0-8.1 0-19.3 0-2.1 0-2.6-1.3-1.9-3 1.3-3.1 3.7-8.3 5.1-10.9.3-.6 1-1.6 2.5-1.6h36.4c-.2 2.7-.2 5.4-.6 8.1-1.1 7.2-3.8 13.8-8.2 19.6-7.2 9.5-16.6 15.4-28.5 17-9.8 1.3-18.9-.6-26.9-6.6-7.4-5.6-11.6-13-12.7-22.2-1.3-10.9 1.9-20.7 8.5-29.3 7.1-9.3 16.5-15.2 28-17.3 9.4-1.7 18.4-.6 26.5 4.9 5.3 3.5 9.1 8.3 11.6 14.1.6.9.2 1.4-1 1.7z"/>
				<path d="m107.2 77.6c-9.1-.2-17.4-2.8-24.4-8.8-5.9-5.1-9.6-11.6-10.8-19.3-1.8-11.3 1.3-21.3 8.1-30.2 7.3-9.6 16.1-14.6 28-16.7 10.2-1.8 19.8-.8 28.5 5.1 7.9 5.4 12.8 12.7 14.1 22.3 1.7 13.5-2.2 24.5-11.5 33.9-6.6 6.7-14.7 10.9-24 12.8-2.7.5-5.4.6-8 .9zm23.8-40.4c-.1-1.3-.1-2.3-.3-3.3-1.8-9.9-10.9-15.5-20.4-13.3-9.3 2.1-15.3 8-17.5 17.4-1.8 7.8 2 15.7 9.2 18.9 5.5 2.4 11 2.1 16.3-.6 7.9-4.1 12.2-10.5 12.7-19.1z" fill-rule="nonzero"/>
			</g>
		</g>
	</svg></div>
<div>Reference</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/components"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M10,5V11H21V5M16,18H21V12H16M4,18H9V5H4M10,18H15V12H10V18Z" />
	</svg></div>
<div>Components</div>
</div></a>
<a title href="/declarative-syntax" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
	</svg></div>
<div>Declarative Syntax</div>
</div></a>
<a title href="/routing" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M11,10H5L3,8L5,6H11V3L12,2L13,3V4H19L21,6L19,8H13V10H19L21,12L19,14H13V20A2,2 0 0,1 15,22H9A2,2 0 0,1 11,20V10Z" />
	</svg></div>
<div>Routing</div>
</div></a>
<a href="/static-resources" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M7,15L11.5,9L15,13.5L17.5,10.5L21,15M22,4H14L12,2H6A2,2 0 0,0 4,4V16A2,2 0 0,0 6,18H22A2,2 0 0,0 24,16V6A2,2 0 0,0 22,4M2,6H0V11H0V20A2,2 0 0,0 2,22H20V20H2V6Z" />
	</svg></div>
<div>Images and Static Resources</div>
</div></a>
<a class="link heading fit unselectable" title href="/js"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" />
	</svg></div>
<div>JavaScript Interoperability</div>
</div></a>
<a href="/concurrency" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M16,4.5V7H5V9H16V11.5L19.5,8M16,12.5V15H5V17H16V19.5L19.5,16" />
	</svg></div>
<div>Concurrency</div>
</div></a>
<a href="/seo" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,4.5L8.95,4.53C8.71,5.05 8.34,5.93 8.07,7H10.93C10.66,5.93 10.29,5.05 10.05,4.53C9.87,4.5 9.69,4.5 9.5,4.5M13.83,7C13.24,5.97 12.29,5.17 11.15,4.78C11.39,5.31 11.7,6.08 11.93,7H13.83M5.17,7H7.07C7.3,6.08 7.61,5.31 7.85,4.78C6.71,5.17 5.76,5.97 5.17,7M4.5,9.5C4.5,10 4.58,10.53 4.73,11H6.87L6.75,9.5L6.87,8H4.73C4.58,8.47 4.5,9 4.5,9.5M14.27,11C14.42,10.53 14.5,10 14.5,9.5C14.5,9 14.42,8.47 14.27,8H12.13C12.21,8.5 12.25,9 12.25,9.5C12.25,10 12.21,10.5 12.13,11H14.27M7.87,8L7.75,9.5L7.87,11H11.13C11.21,10.5 11.25,10 11.25,9.5C11.25,9 11.21,8.5 11.13,8H7.87M9.5,14.5C9.68,14.5 9.86,14.5 10.03,14.47C10.28,13.95 10.66,13.07 10.93,12H8.07C8.34,13.07 8.72,13.95 8.97,14.47L9.5,14.5M13.83,12H11.93C11.7,12.92 11.39,13.69 11.15,14.22C12.29,13.83 13.24,13.03 13.83,12M5.17,12C5.76,13.03 6.71,13.83 7.85,14.22C7.61,13.69 7.3,12.92 7.07,12H5.17Z" />
	</svg></div>
<div>SEO</div>
</div></a>
<a class="link heading fit unselectable" title href="/lifecycle"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M23,12L19,16V13H6.83C6.42,14.17 5.31,15 4,15A3,3 0 0,1 1,12A3,3 0 0,1 4,9C5.31,9 6.42,9.83 6.83,11H19V8L23,12Z" />
	</svg></div>
<div>Lifecycle and Updates</div>
</div></a>
<a class="link heading fit unselectable" title href="/install"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
	</svg></div>
<div>Install</div>
</div></a>
<a class="link heading fit unselectable" title href="/testing"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M7,2V4H8V18A4,4 0 0,0 12,22A4,4 0 0,0 16,18V4H17V2H7M11,16C10.4,16 10,15.6 10,15C10,14.4 10.4,14 11,14C11.6,14 12,14.4 12,15C12,15.6 11.6,16 11,16M13,12C12.4,12 12,11.6 12,11C12,10.4 12.4,10 13,10C13.6,10 14,10.4 14,11C14,11.6 13.6,12 13,12M14,7H10V4H14V7Z" />
	</svg></div>
<div>Testing</div>
</div></a>
<a class="link heading fit unselectable" title href="/actions"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M16,4L9,8.04V15.96L16,20L23,15.96V8.04M16,6.31L19.8,8.5L16,10.69L12.21,8.5M0,7V9H7V7M11,10.11L15,12.42V17.11L11,14.81M21,10.11V14.81L17,17.11V12.42M2,11V13H7V11M4,15V17H7V15" />
	</svg></div>
<div>Actions</div>
</div></a>
<a class="link heading fit unselectable" title href="/states"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M4 12V9C4 11.2 7.6 13 12 13S20 11.2 20 9V12C20 12.5 19.8 12.9 19.5 13.4C18.7 13.1 17.9 13 17 13C14.5 13 12.1 14.1 10.6 15.9C6.8 15.6 4 14 4 12M12 11C16.4 11 20 9.2 20 7S16.4 3 12 3 4 4.8 4 7 7.6 11 12 11M9.1 19.7L8.8 19L9.1 18.3C9.2 18.1 9.3 18 9.3 17.8C6.2 17.2 4 15.8 4 14V17C4 18.8 6.4 20.3 9.7 20.8C9.5 20.5 9.3 20.1 9.1 19.7M17 18C16.4 18 16 18.4 16 19S16.4 20 17 20 18 19.6 18 19 17.6 18 17 18M23 19C22.1 21.3 19.7 23 17 23S11.9 21.3 11 19C11.9 16.7 14.3 15 17 15S22.1 16.7 23 19M19.5 19C19.5 17.6 18.4 16.5 17 16.5S14.5 17.6 14.5 19 15.6 21.5 17 21.5 19.5 20.4 19.5 19Z" />
	</svg></div>
<div>State Management</div>
</div></a>
<a class="link heading fit unselectable" title href="/notifications"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
	</svg></div>
<div>Notifications</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/migrate"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" />
	</svg></div>
<div>Migrate From v8 to v9</div>
</div></a>
<a class="link heading fit unselectable" title href="/github-deploy"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
	</svg></div>
<div>Deploy on GitHub Pages</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="https://twitter.com/jonhymaxoo"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="#1DA1F2" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
	</svg></div>
<div>Twitter</div>
</div></a>
<a class="link heading fit unselectable" title href="https://github.com/maxence-charriere/go-app"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
	</svg></div>
<div>GitHub</div>
</div></a>
<a class="link heading fit unselectable" title href="https://opencollective.com/go-app"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M15.41,22C15.35,22 15.28,22 15.22,22C15.1,21.95 15,21.85 14.96,21.73L12.74,15.93C12.65,15.69 12.77,15.42 13,15.32C13.71,15.06 14.28,14.5 14.58,13.83C15.22,12.4 14.58,10.73 13.15,10.09C11.72,9.45 10.05,10.09 9.41,11.5C9.11,12.21 9.09,13 9.36,13.69C9.66,14.43 10.25,15 11,15.28C11.24,15.37 11.37,15.64 11.28,15.89L9,21.69C8.96,21.81 8.87,21.91 8.75,21.96C8.63,22 8.5,22 8.39,21.96C3.24,19.97 0.67,14.18 2.66,9.03C4.65,3.88 10.44,1.31 15.59,3.3C18.06,4.26 20.05,6.15 21.13,8.57C22.22,11 22.29,13.75 21.33,16.22C20.32,18.88 18.23,21 15.58,22C15.5,22 15.47,22 15.41,22M12,3.59C7.03,3.46 2.9,7.39 2.77,12.36C2.68,16.08 4.88,19.47 8.32,20.9L10.21,16C8.38,15 7.69,12.72 8.68,10.89C9.67,9.06 11.96,8.38 13.79,9.36C15.62,10.35 16.31,12.64 15.32,14.47C14.97,15.12 14.44,15.65 13.79,16L15.68,20.93C17.86,19.95 19.57,18.16 20.44,15.93C22.28,11.31 20.04,6.08 15.42,4.23C14.33,3.8 13.17,3.58 12,3.59Z" />
	</svg></div>
<div>Open Collective</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/privacy-policy"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M22 17V16.5C22 15.12 20.88 14 19.5 14S17 15.12 17 16.5V17C16.45 17 16 17.45 16 18V22C16 22.55 16.45 23 17 23H22C22.55 23 23 22.55 23 22V18C23 17.45 22.55 17 22 17M21 17H18V16.5C18 15.67 18.67 15 19.5 15S21 15.67 21 16.5V17M8 8C8 5.79 9.79 4 12 4S16 5.79 16 8 14.21 12 12 12 8 10.21 8 8M14 20H4V18C4 15.79 7.58 14 12 14C13.27 14 14.46 14.15 15.53 14.41C15.32 14.82 15.15 15.25 15.07 15.71C14.42 16.26 14 17.08 14 18V20Z" />
	</svg></div>
<div>Privacy Policy</div>
</div></a>
<div class="separator"></div>
</nav></div>
<div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
</div></div></div>
<div style="position:relative;display:none;flex-shrink:0;flex-basis:270px;overflow:hidden;"><div data-goapp-ui="scroll" class="fill"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
<div style="width:calc(100% - 24px);padding:0 12px;height:72px;"></div>
<div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><nav class="index">
<div class="separator"></div>
<header class="h2">Index</header>
<div class="separator"></div>
<a class="index-link" href="#intro" title="Intro">Intro</a>
<a class="index-link" href="#html-elements" title="HTML Elements">HTML Elements</a>
<a class="index-link" href="#create" title="Create">    Create</a>
<a class="index-link" href="#standard-elements" title="Standard Elements">    Standard Elements</a>
<a class="index-link" href="#self-closing-elements" title="Self Closing Elements">    Self Closing Elements</a>
<a href="#attributes" title="Attributes" class="index-link">    Attributes</a>
<a class="index-link" href="#style" title="Style">    Style</a>
<a title="Event handlers" class="index-link" href="#event-handlers">    Event handlers</a>
<a class="index-link" href="#raw-elements" title="Raw elements">Raw elements</a>
<a class="index-link" href="#nested-components" title="Nested Components">Nested Components</a>
<a class="index-link" href="#condition" title="Condition">Condition</a>
<a class="index-link" href="#if" title="If">    If</a>
<a href="#elseif" title="ElseIf" class="index-link">    ElseIf</a>
<a class="index-link" href="#else" title="Else">    Else</a>
<a href="#range" title="Range" class="index-link">Range</a>
<a class="index-link" href="#slice" title="Slice">    Slice</a>
<a class="index-link" href="#map" title="Map">    Map</a>
<a class="index-link" href="#form-helpers" title="Form helpers">Form helpers</a>
<a class="index-link" href="#valueto" title="ValueTo">    ValueTo</a>
<div class="separator"></div>
<a href="#next" title="Next" class="index-link">Next</a>
<a class="index-link" href="#report-an-issue" title="Report an Issue">Report an Issue</a>
<div class="separator"></div>
</nav></div>
<div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
</div></div></div>
<div style="position:relative;flex-grow:1;overflow:hidden;"><div data-goapp-ui="scroll" class="fill"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
<div style="width:calc(100% - 24px);padding:0 12px;height:72px;"><nav class="fill"><div style="display:flex;justify-content:flex-end;align-items:center;" data-goapp="Stack" class="fill"></div></nav></div>
<div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><main><article>
<header id="page-top" class="page-title center"><div data-goapp="Stack" style="display:flex;justify-content:center;align-items:center;">
<div data-goapp="Icon" class="icon-left unselectable" style="width:90px;height:90px;max-width:90px;max-height:90px;min-width:90px;min-height:90px;"><svg style="width:90px;height:90px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
	</svg></div>
<h1>Declarative Syntax</h1>
</div></header>
<div class="separator"></div>
<div>
<aside class="heading fill" style="display:none;"><div style="display:flex;justify-content:center;align-items:center;width:100%;height:100%;" data-goapp="Stack">
<div style="width:56px;height:56px;min-width:56px;min-height:56px;border:2px solid currentColor;border-top:2px solid white;border-radius:50%;animation:goapp-spin-frames 500ms linear infinite;"></div>
<div style="margin-left:18px;"><div>Loading declarative-syntax.md...</div></div>
</div></aside>
<div class="fill"><div class="markdown"><h2 id="intro">Intro</h2>

<p>The go-app declarative syntax is to customize <a href="/components">components</a>&rsquo; look.</p>

<p>It uses a chaining mechanism made from the <a href="https://golang.org">Go programming language</a> syntax that allows composing HTML elements and components in order to craft beautiful and usable UIs.</p>

<p>Here is an example where HTML elements are used to display a title and a paragraph:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div().Body(
		app.H1().
			Class(&quot;title&quot;).
			Text(&quot;Build a GUI with Go&quot;),
		app.P().
			Class(&quot;text&quot;).
			Text(&quot;Just because Go and this package are really awesome!&quot;),
	)
}
</code></pre>

<h2 id="html-elements">HTML Elements</h2>

<p>Go-app provides interfaces for each standard HTML element. Those interfaces describe setters for attributes and event handlers.</p>

<p>Here is a simplified version of the interface for a <a href="/reference#HTMLDiv">&lt;div&gt;</a>:</p>

<pre><code class="language-go">type HTMLDiv interface {
    // Attributes:
    Body(children ...UI) HTMLDiv
    Class(v string) HTMLDiv
    ID(v string) HTMLDiv
    Style(k, v string) HTMLDiv

    // Event handlers:
    OnClick(h EventHandler, scope ...interface{}) HTMLDiv
    OnKeyPress(h EventHandler, scope ...interface{}) HTMLDiv
    OnMouseOver(h EventHandler, scope ...interface{}) HTMLDiv
}
</code></pre>

<h3 id="create">Create</h3>

<p>An HTML element is created by calling a function named after its name. The example below shows how to create a <a href="/reference#Div">&lt;div&gt;</a>:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div()
}
</code></pre>

<h3 id="standard-elements">Standard Elements</h3>

<p>A standard HTML element is an element that can contain other UI elements. Other HTML elements, texts, and <a href="/components">components</a> are nested by using the <code>Body()</code> method:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div().Body(       // Div Container
		app.H1().Text(&quot;Title&quot;),  // First child
		app.P().Text(&quot;Content&quot;), // Second child
	)
}
</code></pre>

<h3 id="self-closing-elements">Self Closing Elements</h3>

<p>A self-closing element is an HTML element that cannot contain other UI elements.</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Img().Src(&quot;/myImage.png&quot;)
}
</code></pre>

<h3 id="attributes">Attributes</h3>

<p>HTML element interfaces provide methods to set element attributes. Here is an example that set a <code>&lt;div&gt;</code>&rsquo;s class:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div().Class(&quot;my-class&quot;)
}
</code></pre>

<p>Multiple attributes are set by using the chaining mechanism:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div().
		ID(&quot;id-name&quot;).
		Class(&quot;class-1&quot;).
		Class(&quot;class-2&quot;)
}
</code></pre>

<h3 id="style">Style</h3>

<p>Style is an attribute that sets the element style with CSS.</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div().Style(&quot;width&quot;, &quot;400px&quot;)
}
</code></pre>

<p>Like the <code>Class()</code> attribute, multiple styles are set by using the chaining mechanism:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div().
		Style(&quot;width&quot;, &quot;400px&quot;).
		Style(&quot;height&quot;, &quot;200px&quot;).
		Style(&quot;background-color&quot;, &quot;deepskyblue&quot;)
}
</code></pre>

<h3 id="event-handlers">Event handlers</h3>

<p><a href="/reference#EventHandler">Event handlers</a> are functions that are called when an HTML event occurs. They must have the following signature:</p>

<pre><code class="language-go">func(ctx app.Context, e app.Event)
</code></pre>

<p>Like attributes, HTML element interfaces provide methods to associate an event to a given handler:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div().OnClick(c.onClick)
}

func (c *myCompo) onClick(ctx app.Context, e app.Event) {
	fmt.Println(&quot;onClick is called&quot;)
}
</code></pre>

<p>The <a href="/reference#Context">Context</a> argument embeds several go-app tools that help in creating responsive UIs. Usable with any function accepting a <a href="https://golang.org/pkg/context/#Context">Go standard context</a>, it is canceled when the source of the event is dismounted. The source element value can be retrieved with the JSSrc field:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div().OnChange(c.onChange)
}

func (c *myCompo) onChange(ctx app.Context, e app.Event) {
	v := ctx.JSSrc().Get(&quot;value&quot;)
}
</code></pre>

<p><code>ctx.JSSrc</code> and <a href="/reference#Event">Event</a> are <a href="/js">JavaScript objects wrapped in Go interfaces</a>.</p>

<h2 id="text">Text</h2>

<p><a href="/reference#Text">Text()</a> represents simple HTML text. Here is an example that display a <code>Hello World</code> text:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div().Body( // Container
		app.Text(&quot;Hello&quot;), // First text
		app.Text(&quot;World&quot;), // Second text
	)
}
</code></pre>

<p>When an HTML element embeds a single text element, HTML element&rsquo;s <code>Text()</code> method can be used instead:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Div().Text(&quot;Hello World&quot;)
}
</code></pre>

<h2 id="raw-elements">Raw elements</h2>

<p><a href="/reference#Raw">Raw elements</a> are elements representing plain HTML code. Be aware that using them is <strong>unsafe since there is no check on HTML format</strong>.</p>

<p>Here is an example that creates a <code>&lt;svg&gt;</code> element.</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	return app.Raw(`
	&lt;svg width=&quot;100&quot; height=&quot;100&quot;&gt;
		&lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;green&quot; stroke-width=&quot;4&quot; fill=&quot;yellow&quot; /&gt;
	&lt;/svg&gt;
	`)
}
</code></pre>

<h2 id="nested-components">Nested Components</h2>

<p><a href="/components">Components</a> are structs that let you split the UI into independent and reusable pieces. They can be used within other components to achieve more complex UIs.</p>

<p>Here is an example where a component named <code>foo</code> embeds a <a href="#text">text</a> and another component named <code>bar</code>.</p>

<pre><code class="language-go">// foo component:
type foo struct {
	app.Compo
}

func (f *foo) Render() app.UI {
	return app.P().Body(
		app.Text(&quot;Foo, &quot;), // Simple HTML text
		&amp;bar{},            // Nested bar component
	)
}

// bar component:
type bar struct {
	app.Compo
}

func (b *bar) Render() app.UI {
	return app.Text(&quot;Bar!&quot;)
}
</code></pre>

<h2 id="condition">Condition</h2>

<p>A <a href="/reference#Condition">Condition</a> is a construct that selects the UI elements that satisfy a condition. They are created by calling the <a href="/reference#If">If()</a> function.</p>

<h3 id="if">If</h3>

<p>Here is an If example that shows a title only when the <code>showTitle</code> value is <code>true</code>:</p>

<pre><code class="language-go">type myCompo struct {
	app.Compo

	showTitle bool
}

func (c *myCompo) Render() app.UI {
	return app.Div().Body(
		app.If(c.showTitle,
			app.H1().Text(&quot;hello&quot;),
		),
	)
}
</code></pre>

<h3 id="elseif">ElseIf</h3>

<p>Here is an ElseIf example that shows a title in different colors depending on an <code>int</code> value:</p>

<pre><code class="language-go">type myCompo struct {
	app.Compo

	color int
}

func (c *myCompo) Render() app.UI {
	return app.Div().Body(
		app.If(c.color &gt; 7,
			app.H1().
				Style(&quot;color&quot;, &quot;green&quot;).
				Text(&quot;Good!&quot;),
		).ElseIf(c.color &lt; 4,
			app.H1().
				Style(&quot;color&quot;, &quot;red&quot;).
				Text(&quot;Bad!&quot;),
		).Else(
			app.H1().
				Style(&quot;color&quot;, &quot;orange&quot;).
				Text(&quot;So so!&quot;),
		),
	)
}
</code></pre>

<h3 id="else">Else</h3>

<p>Here is an Else example that shows a simple text when the <code>showTitle</code> value is <code>false</code>:</p>

<pre><code class="language-go">type myCompo struct {
	app.Compo

	showTitle bool
}

func (c *myCompo) Render() app.UI {
	return app.Div().Body(
		app.If(c.showTitle,
			app.H1().Text(&quot;hello&quot;),
		).Else(
			app.Text(&quot;world&quot;), // Shown when showTitle == false
		),
	)
}
</code></pre>

<h2 id="range">Range</h2>

<p>Range represents a <a href="/reference#RangeLoop">range loop</a> that shows UI elements generated from a <a href="#slice">slice</a> or <a href="#map">map</a>. They are created by calling the <a href="/reference#Range">Range()</a> function.</p>

<h3 id="slice">Slice</h3>

<p>Here is a slice example that shows an unordered list from a <code>[]string</code>:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	data := []string{
		&quot;hello&quot;,
		&quot;go-app&quot;,
		&quot;is&quot;,
		&quot;sexy&quot;,
	}

	return app.Ul().Body(
		app.Range(data).Slice(func(i int) app.UI {
			return app.Li().Text(data[i])
		}),
	)
}
</code></pre>

<h3 id="map">Map</h3>

<p>Here is a map example that shows an unordered list from a <code>map[string]int</code>:</p>

<pre><code class="language-go">func (c *myCompo) Render() app.UI {
	data := map[string]int{
		&quot;Go&quot;:         10,
		&quot;JavaScript&quot;: 4,
		&quot;Python&quot;:     6,
		&quot;C&quot;:          8,
	}

	return app.Ul().Body(
		app.Range(data).Map(func(k string) app.UI {
			s := fmt.Sprintf(&quot;%s: %v/10&quot;, k, data[k])

			return app.Li().Text(s)
		}),
	)
}
</code></pre>

<h2 id="form-helpers">Form helpers</h2>

<p>Form helpers are <a href="/components">component</a> methods that help to map HTML form element values to <a href="/components#fields">component fields</a>.</p>

<h3 id="valueto">ValueTo</h3>

<p><a href="/reference#Compo.ValueTo">ValueTo</a> maps, when it exists, an HTML element value property to a given variable.</p>

<p>Here is a Hello component version that uses the <code>ValueTo()</code> method to get the username from its input rather than defining an <a href="/declarative-syntax#event-handlers">event handler</a>:</p>

<pre><code class="language-go">type hello struct {
	app.Compo

	name string
}

func (h *hello) Render() app.UI {
	return app.Div().Body(
		app.H1().Text(&quot;Hello &quot; + h.name),
		app.P().Body(
			app.Input().
				Type(&quot;text&quot;).
				Value(h.name).
				Placeholder(&quot;What is your name?&quot;).
				AutoFocus(true).
				// Here the username is directly mapped from the input's change
				// event.
				OnChange(h.ValueTo(&amp;h.name)),
		),
	)
}
</code></pre>

<h2 id="next">Next</h2>

<ul>
<li><a href="/routing">Route a components</a></li>
<li><a href="/reference">Reference</a></li>
</ul>
</div></div>
</div>
<div class="separator"></div>
<aside>
<header id="repport-an-issue" class="h2">Report an issue</header>
<p>
Found something incorrect, a typo or have suggestions to improve this page? 
<a href="https://github.com/maxence-charriere/go-app/issues/new?title=Documentation issue in Declarative Syntax page">🚀 Submit a GitHub issue!</a>
</p>
</aside>
<div class="separator"></div>
</article></main></div>
<div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
</div></div></div>
<div style="position:relative;display:none;flex-shrink:0;flex-basis:336px;overflow:hidden;"><div data-goapp-ui="flyer" class="fill"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
<div style="width:calc(100% - 36px);padding:0 18px;height:72px;"></div>
<div style="display:flex;flex-direction:column;justify-content:center;width:calc(100% - 36px);height:calc(100% - 72px);padding:0 18px;overflow:hidden;" id="goapp-flyer-layout-e642aacc-89f1-45cd-9907-d423d8c5f485">
<div style="height:0px;overflow:hidden;"><aside class="fill"><div data-goapp-ui="adsenseDisplay" class="fill no-scroll"><ins id="goapp-adsense-display-4288a89e-7a88-461c-a980-c35501c8d1e7"></ins></div></aside></div>
<div style="display:none;height:0px;"><div class="fill" style="display:flex;justify-content:center;align-items:center;" data-goapp="Stack"><aside class="magnify text-center"><a class="default" href="https://github.com/sponsors/maxence-charriere">
<div data-goapp="Icon" class="center icon-top" style="width:72px;height:72px;max-width:72px;max-height:72px;min-width:72px;min-height:72px;"><svg style="width:72px;height:72px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
	</svg></div>
<header class="h3 default">Support on GitHub</header>
<p class="subtext">Help with go-app development by sponsoring it on GitHub.</p>
</a></aside></div></div>
<div style="display:none;height:0px;overflow:hidden;"></div>
</div>
<div style="width:calc(100% - 36px);padding:0 18px;height:0px;"></div>
</div></div></div>
</div>
<div style="display:block;position:absolute;top:0;left:0;cursor:pointer;"><div class="goapp-shell-hamburger-button-default">☰</div></div>
<div style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;"><div class="menu fill menu-hamburger-background" data-goapp-ui="scroll"><div style="width:100%;height:calc(100% - 24px);padding:12px 0;">
<div style="width:calc(100% - 24px);padding:0 12px;height:72px;"><div data-goapp="Stack" class="fill" style="display:flex;justify-content:flex-start;align-items:center;"><header><a href="/" class="heading app-title">Go-App</a></header></div></div>
<div style="width:calc(100% - 24px);height:calc(100% - 72px);padding:0 12px;overflow-x:hidden;overflow-y:scroll;"><nav>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
	</svg></div>
<div>Home</div>
</div></a>
<a title href="/getting-started" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M21.61 2.39C21.61 2.39 16.66 .269 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.79 17.45 10.61 17.63 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z" />
	</svg></div>
<div>Getting Started</div>
</div></a>
<a class="link heading fit unselectable" title href="/architecture"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z" />
	</svg></div>
<div>Architecture</div>
</div></a>
<a class="link heading fit unselectable" title href="/reference"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg width="24px" height="24px" viewBox="0 0 207 78" xmlns="http://www.w3.org/2000/svg">
		<g fill="currentColor" fill-rule="evenodd">
			<path d="m16.2 24.1c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h35.7c.4 0 .5.3.3.6l-1.7 2.6c-.2.3-.7.6-1 .6z"/>
			<path d="m1.1 33.3c-.4 0-.5-.2-.3-.5l2.1-2.7c.2-.3.7-.5 1.1-.5h45.6c.4 0 .6.3.5.6l-.8 2.4c-.1.4-.5.6-.9.6z"/>
			<path d="m25.3 42.5c-.4 0-.5-.3-.3-.6l1.4-2.5c.2-.3.6-.6 1-.6h20c.4 0 .6.3.6.7l-.2 2.4c0 .4-.4.7-.7.7z"/>
			<g transform="translate(55)">
				<path d="m74.1 22.3c-6.3 1.6-10.6 2.8-16.8 4.4-1.5.4-1.6.5-2.9-1-1.5-1.7-2.6-2.8-4.7-3.8-6.3-3.1-12.4-2.2-18.1 1.5-6.8 4.4-10.3 10.9-10.2 19 .1 8 5.6 14.6 13.5 15.7 6.8.9 12.5-1.5 17-6.6.9-1.1 1.7-2.3 2.7-3.7-3.6 0-8.1 0-19.3 0-2.1 0-2.6-1.3-1.9-3 1.3-3.1 3.7-8.3 5.1-10.9.3-.6 1-1.6 2.5-1.6h36.4c-.2 2.7-.2 5.4-.6 8.1-1.1 7.2-3.8 13.8-8.2 19.6-7.2 9.5-16.6 15.4-28.5 17-9.8 1.3-18.9-.6-26.9-6.6-7.4-5.6-11.6-13-12.7-22.2-1.3-10.9 1.9-20.7 8.5-29.3 7.1-9.3 16.5-15.2 28-17.3 9.4-1.7 18.4-.6 26.5 4.9 5.3 3.5 9.1 8.3 11.6 14.1.6.9.2 1.4-1 1.7z"/>
				<path d="m107.2 77.6c-9.1-.2-17.4-2.8-24.4-8.8-5.9-5.1-9.6-11.6-10.8-19.3-1.8-11.3 1.3-21.3 8.1-30.2 7.3-9.6 16.1-14.6 28-16.7 10.2-1.8 19.8-.8 28.5 5.1 7.9 5.4 12.8 12.7 14.1 22.3 1.7 13.5-2.2 24.5-11.5 33.9-6.6 6.7-14.7 10.9-24 12.8-2.7.5-5.4.6-8 .9zm23.8-40.4c-.1-1.3-.1-2.3-.3-3.3-1.8-9.9-10.9-15.5-20.4-13.3-9.3 2.1-15.3 8-17.5 17.4-1.8 7.8 2 15.7 9.2 18.9 5.5 2.4 11 2.1 16.3-.6 7.9-4.1 12.2-10.5 12.7-19.1z" fill-rule="nonzero"/>
			</g>
		</g>
	</svg></div>
<div>Reference</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/components"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M10,5V11H21V5M16,18H21V12H16M4,18H9V5H4M10,18H15V12H10V18Z" />
	</svg></div>
<div>Components</div>
</div></a>
<a class="link heading fit unselectable" title href="/declarative-syntax"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
	</svg></div>
<div>Declarative Syntax</div>
</div></a>
<a class="link heading fit unselectable" title href="/routing"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M11,10H5L3,8L5,6H11V3L12,2L13,3V4H19L21,6L19,8H13V10H19L21,12L19,14H13V20A2,2 0 0,1 15,22H9A2,2 0 0,1 11,20V10Z" />
	</svg></div>
<div>Routing</div>
</div></a>
<a class="link heading fit unselectable" title href="/static-resources"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M7,15L11.5,9L15,13.5L17.5,10.5L21,15M22,4H14L12,2H6A2,2 0 0,0 4,4V16A2,2 0 0,0 6,18H22A2,2 0 0,0 24,16V6A2,2 0 0,0 22,4M2,6H0V11H0V20A2,2 0 0,0 2,22H20V20H2V6Z" />
	</svg></div>
<div>Images and Static Resources</div>
</div></a>
<a class="link heading fit unselectable" title href="/js"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" />
	</svg></div>
<div>JavaScript Interoperability</div>
</div></a>
<a class="link heading fit unselectable" title href="/concurrency"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M16,4.5V7H5V9H16V11.5L19.5,8M16,12.5V15H5V17H16V19.5L19.5,16" />
	</svg></div>
<div>Concurrency</div>
</div></a>
<a href="/seo" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,13.73L14.71,14H15.5M9.5,4.5L8.95,4.53C8.71,5.05 8.34,5.93 8.07,7H10.93C10.66,5.93 10.29,5.05 10.05,4.53C9.87,4.5 9.69,4.5 9.5,4.5M13.83,7C13.24,5.97 12.29,5.17 11.15,4.78C11.39,5.31 11.7,6.08 11.93,7H13.83M5.17,7H7.07C7.3,6.08 7.61,5.31 7.85,4.78C6.71,5.17 5.76,5.97 5.17,7M4.5,9.5C4.5,10 4.58,10.53 4.73,11H6.87L6.75,9.5L6.87,8H4.73C4.58,8.47 4.5,9 4.5,9.5M14.27,11C14.42,10.53 14.5,10 14.5,9.5C14.5,9 14.42,8.47 14.27,8H12.13C12.21,8.5 12.25,9 12.25,9.5C12.25,10 12.21,10.5 12.13,11H14.27M7.87,8L7.75,9.5L7.87,11H11.13C11.21,10.5 11.25,10 11.25,9.5C11.25,9 11.21,8.5 11.13,8H7.87M9.5,14.5C9.68,14.5 9.86,14.5 10.03,14.47C10.28,13.95 10.66,13.07 10.93,12H8.07C8.34,13.07 8.72,13.95 8.97,14.47L9.5,14.5M13.83,12H11.93C11.7,12.92 11.39,13.69 11.15,14.22C12.29,13.83 13.24,13.03 13.83,12M5.17,12C5.76,13.03 6.71,13.83 7.85,14.22C7.61,13.69 7.3,12.92 7.07,12H5.17Z" />
	</svg></div>
<div>SEO</div>
</div></a>
<a class="link heading fit unselectable" title href="/lifecycle"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M23,12L19,16V13H6.83C6.42,14.17 5.31,15 4,15A3,3 0 0,1 1,12A3,3 0 0,1 4,9C5.31,9 6.42,9.83 6.83,11H19V8L23,12Z" />
	</svg></div>
<div>Lifecycle and Updates</div>
</div></a>
<a class="link heading fit unselectable" title href="/install"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
	</svg></div>
<div>Install</div>
</div></a>
<a class="link heading fit unselectable" title href="/testing"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M7,2V4H8V18A4,4 0 0,0 12,22A4,4 0 0,0 16,18V4H17V2H7M11,16C10.4,16 10,15.6 10,15C10,14.4 10.4,14 11,14C11.6,14 12,14.4 12,15C12,15.6 11.6,16 11,16M13,12C12.4,12 12,11.6 12,11C12,10.4 12.4,10 13,10C13.6,10 14,10.4 14,11C14,11.6 13.6,12 13,12M14,7H10V4H14V7Z" />
	</svg></div>
<div>Testing</div>
</div></a>
<a title href="/actions" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M16,4L9,8.04V15.96L16,20L23,15.96V8.04M16,6.31L19.8,8.5L16,10.69L12.21,8.5M0,7V9H7V7M11,10.11L15,12.42V17.11L11,14.81M21,10.11V14.81L17,17.11V12.42M2,11V13H7V11M4,15V17H7V15" />
	</svg></div>
<div>Actions</div>
</div></a>
<a class="link heading fit unselectable" title href="/states"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M4 12V9C4 11.2 7.6 13 12 13S20 11.2 20 9V12C20 12.5 19.8 12.9 19.5 13.4C18.7 13.1 17.9 13 17 13C14.5 13 12.1 14.1 10.6 15.9C6.8 15.6 4 14 4 12M12 11C16.4 11 20 9.2 20 7S16.4 3 12 3 4 4.8 4 7 7.6 11 12 11M9.1 19.7L8.8 19L9.1 18.3C9.2 18.1 9.3 18 9.3 17.8C6.2 17.2 4 15.8 4 14V17C4 18.8 6.4 20.3 9.7 20.8C9.5 20.5 9.3 20.1 9.1 19.7M17 18C16.4 18 16 18.4 16 19S16.4 20 17 20 18 19.6 18 19 17.6 18 17 18M23 19C22.1 21.3 19.7 23 17 23S11.9 21.3 11 19C11.9 16.7 14.3 15 17 15S22.1 16.7 23 19M19.5 19C19.5 17.6 18.4 16.5 17 16.5S14.5 17.6 14.5 19 15.6 21.5 17 21.5 19.5 20.4 19.5 19Z" />
	</svg></div>
<div>State Management</div>
</div></a>
<a class="link heading fit unselectable" title href="/notifications"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
	</svg></div>
<div>Notifications</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/migrate"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z" />
	</svg></div>
<div>Migrate From v8 to v9</div>
</div></a>
<a title href="/github-deploy" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
	</svg></div>
<div>Deploy on GitHub Pages</div>
</div></a>
<div class="separator"></div>
<a href="https://twitter.com/jonhymaxoo" class="link heading fit unselectable" title><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="#1DA1F2" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
	</svg></div>
<div>Twitter</div>
</div></a>
<a class="link heading fit unselectable" title href="https://github.com/maxence-charriere/go-app"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
	</svg></div>
<div>GitHub</div>
</div></a>
<a title href="https://opencollective.com/go-app" class="link heading fit unselectable"><div data-goapp="Stack" style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;">
<div style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;" data-goapp="Icon"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
		<path fill="currentColor" d="M15.41,22C15.35,22 15.28,22 15.22,22C15.1,21.95 15,21.85 14.96,21.73L12.74,15.93C12.65,15.69 12.77,15.42 13,15.32C13.71,15.06 14.28,14.5 14.58,13.83C15.22,12.4 14.58,10.73 13.15,10.09C11.72,9.45 10.05,10.09 9.41,11.5C9.11,12.21 9.09,13 9.36,13.69C9.66,14.43 10.25,15 11,15.28C11.24,15.37 11.37,15.64 11.28,15.89L9,21.69C8.96,21.81 8.87,21.91 8.75,21.96C8.63,22 8.5,22 8.39,21.96C3.24,19.97 0.67,14.18 2.66,9.03C4.65,3.88 10.44,1.31 15.59,3.3C18.06,4.26 20.05,6.15 21.13,8.57C22.22,11 22.29,13.75 21.33,16.22C20.32,18.88 18.23,21 15.58,22C15.5,22 15.47,22 15.41,22M12,3.59C7.03,3.46 2.9,7.39 2.77,12.36C2.68,16.08 4.88,19.47 8.32,20.9L10.21,16C8.38,15 7.69,12.72 8.68,10.89C9.67,9.06 11.96,8.38 13.79,9.36C15.62,10.35 16.31,12.64 15.32,14.47C14.97,15.12 14.44,15.65 13.79,16L15.68,20.93C17.86,19.95 19.57,18.16 20.44,15.93C22.28,11.31 20.04,6.08 15.42,4.23C14.33,3.8 13.17,3.58 12,3.59Z" />
	</svg></div>
<div>Open Collective</div>
</div></a>
<div class="separator"></div>
<a class="link heading fit unselectable" title href="/privacy-policy"><div style="display:flex;justify-content:flex-start;align-items:center;padding:3px 0;" data-goapp="Stack">
<div data-goapp="Icon" style="width:24px;height:24px;max-width:24px;max-height:24px;min-width:24px;min-height:24px;margin-right:6px;"><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    	<path fill="currentColor" d="M22 17V16.5C22 15.12 20.88 14 19.5 14S17 15.12 17 16.5V17C16.45 17 16 17.45 16 18V22C16 22.55 16.45 23 17 23H22C22.55 23 23 22.55 23 22V18C23 17.45 22.55 17 22 17M21 17H18V16.5C18 15.67 18.67 15 19.5 15S21 15.67 21 16.5V17M8 8C8 5.79 9.79 4 12 4S16 5.79 16 8 14.21 12 12 12 8 10.21 8 8M14 20H4V18C4 15.79 7.58 14 12 14C13.27 14 14.46 14.15 15.53 14.41C15.32 14.82 15.15 15.25 15.07 15.71C14.42 16.26 14 17.08 14 18V20Z" />
	</svg></div>
<div>Privacy Policy</div>
</div></a>
<div class="separator"></div>
</nav></div>
<div style="width:calc(100% - 24px);padding:0 12px;height:0px;"></div>
</div></div></div>
</div>
<aside id="app-wasm-loader" class="goapp-app-info">
<img id="app-wasm-loader-icon" class="goapp-logo goapp-spin" src="/web/icon.png">
<p id="app-wasm-loader-label" class="goapp-label">go-app documentation 0%</p>
</aside>
</body>
</html>